<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Deepstory</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>

<body>
<div class="container">
    <h1 class="text-center">Deepstory</h1>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="border rounded border-white shadow">
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Text
                                input</a></li>
                            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">GPT2</a></li>
                            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Animate</a></li>
                            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-4">View</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" role="tabpanel" id="tab-1">
                                <form action="{{ url_for('load_sentence') }}" id="loadSent" method="post">
                                    <textarea class="border-light shadow-sm form-control" name="text">Geralt|I hate portals. A round of Gwent maybe?</textarea>
                                    <div class="form-row">
                                        <div class="col">
                                            <p>Default speaker:<select class="border-light shadow-sm custom-select" name="speaker">
                                                {% for model in model_list %}
                                                    <option value="{{ model }}">{{ model }}</option>
                                                {% endfor %}
                                            </select></p>
                                        </div>
                                        <div class="col-2 d-flex align-items-center">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" id="formCheck-5" name="force">
                                                <label class="form-check-label" for="formCheck-5">Force overwrite</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="formCheck-1" name="isSpeaker" checked>
                                                <label class="form-check-label" for="formCheck-1">Parse Speaker</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="formCheck-2" name="isComma">
                                                <label class="form-check-label" for="formCheck-2">Separate comma</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="formCheck-3" name="isChopped" disabled>
                                                <label class="form-check-label" for="formCheck-3">Separate sentence</label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <p>Concat n sents:
                                                <input class="border-light shadow-sm form-control" type="number" value="2" min="1" step="1" max="5" name="n">
                                            </p>
                                        </div>
                                    </div>
                                    <button class="btn btn-success btn-block d-block" type="submit">Load sentences</button>
                                </form>
                            </div>
                            <div class="tab-pane" role="tabpanel" id="tab-2">
                                <form action="{{ url_for('load_text') }}" id="loadText">
                                    <div class="form-row">
                                        <div class="col">
                                            <p>Text:
                                                <select class="border-light shadow-sm custom-select" name="model">
                                                {% for gpt2_model in gpt2_list %}
                                                    <option value="{{ gpt2_model }}">{{ gpt2_model }}</option>
                                                {% endfor %}
                                                </select>
                                            </p>
                                        </div>
                                        <div class="col-3">
                                            <p>Lines count:
                                                <input class="border-light shadow-sm form-control" type="number" value="10" min="1" step="1" name="lines">
                                            </p>
                                        </div>
                                        <div class="col d-flex align-items-center">
                                            <button class="btn btn-primary btn-block" type="submit">Load random</button>
                                        </div>
                                    </div>
                                </form>
                                <p>Intereactive Textarea: (generate inferred to content in textarea)</p>
                                <div id="gpt2"></div>
                            </div>
                            <div class="tab-pane" role="tabpanel" id="tab-3"></div>
                            <div class="tab-pane" role="tabpanel" id="tab-4"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" id="sentenceCard"></div>
        </div>
        <div class="col-4">
            <div class="row" id="status"></div>
            <div class="row" id="mapCard"></div>
            <div class="row" id="gpt2Card">
                <div class="col">
                    <div class="card border-white border rounded shadow">
                        <div class="card-body">
                            <h4 class="card-title">GPT2:</h4>
                            <form action="{{ url_for('load_gpt2') }}" id="loadGPT2">
                                <div class="form-row">
                                    <div class="col">
                                        <p>Model:
                                            <select class="border-light shadow-sm custom-select" name="model">
                                                {% for gpt2_model in gpt2_list %}
                                                    <option value="{{ gpt2_model }}">{{ gpt2_model }}</option>
                                                {% endfor %}
                                            </select>
                                        </p>
                                        <button class="btn btn-primary btn-block" type="submit">Load model</button>
                                    </div>
                                </div>
                            </form>
                            <form action="{{ url_for('generate_text') }}" id="generateText" method="post">
                                <div class="form-row">
                                    <div class="col">
                                        <p>Predict tokens:
                                            <input class="border-light shadow-sm form-control" type="number" value="200" min="0" step="1" name="predict_length">
                                        </p>
                                        <p>Temperature:
                                            <input class="border-light shadow-sm form-control" type="number" value="1" min="0" step="0.01" max="3" name="temperature">
                                        </p>
                                    </div>
                                    <div class="col">
                                        <p>Top-p:
                                            <input class="border-light shadow-sm form-control" type="number" value="1" min="0" max="1" step="0.01" name="top_p">
                                        </p>
                                        <p>Top-k:
                                            <input class="border-light shadow-sm form-control" type="number" value="100" min="0" step="1" name="top_k">
                                        </p>
                                    </div>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="formCheck-4" name="do_sample" checked>
                                    <label class="form-check-label" for="formCheck-4">do_sample</label>
                                </div>
                                <button class="btn btn-success btn-block d-block" type="submit">Generate whole text</button>
                            </form>
                            <form action="{{ url_for('generate_sents') }}" id="generateSentence" method="post">
                                <div class="form-row">
                                    <div class="col">
                                        <p>Sentences:
                                            <input class="border-light shadow-sm form-control" type="number" value="2" min="1" step="1" name="max_sentences">
                                        </p>
                                    </div>
                                    <div class="col">
                                        <p>Batches:
                                            <input class="border-light shadow-sm form-control" type="number" value="3" min="1" step="1" name="batches" max="10">
                                        </p>
                                    </div>
                                </div>
                                <button class="btn btn-success btn-block" type="submit">Predict sentences</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" id="sentenceArea">
        <div class="col">
            <div class="table-responsive border rounded border-white shadow" id="sentences">
            </div>
            <div class="card border-light border rounded shadow">
                <div class="card-body text-center">
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-warning btn-block" id="modify" type="button">Modify</button>
                        </div>
                        <div class="col">
                            <button class="btn btn-primary btn-block" id="synthesize" type="button">1. Synthesize
                            </button>
                        </div>
                        <div class="col">
                            <button class="btn btn-primary btn-block" id="createAudio" type="button">2. Create base
                                audio
                            </button>
                        </div>
                        <div class="col">
                            <button class="btn btn-primary btn-block" id="createVideo" type="button">3. Create base
                                video
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('deepstoryjs') }}"></script>
</body>

</html>